@import "reset";
@import "plugin";
@import "normalize";

@import "login-register"; // menu
@import "menu"; // menu
@import "menu-section"; // menu
@import "gutter"; // 间隔
@import "markdown"; // markdown
@import "form"; // 组件
@import "statistics"; // 统计数据

// FRAME
body{
  position: relative;
  background-color: $bg-main;
}

.diary {
  padding-top: $height-navbar;
  .diary-list-container {
    overflow-y: auto;
    width: 100%;
    background-color: $bg-light;
  }
  .diary-container {}
}

.diary-list-group-container{
  padding-bottom: 100px;
}

// PC & IPAD
@media (min-width: $grid-separate-width-md) {
  .diary {
    display: flex;
    .diary-list-container {
      border-right: 1px solid $color-border;
      overflow-y: auto;
      width: $menu-panel-big;
      flex-shrink: 0;
      background-color: $bg-light;
    }
    .diary-container {
      display: block;
      overflow-y: auto;
      flex-grow: 1;
    }
  }
}

// IPAD
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .diary {
    padding-top: $height-navbar;
    display: flex;
    .diary-list-container {
      border-right: 1px solid $color-border;
      width: 400px;
    }
    .diary-container {
      display: block;
    }
  }
}

// MOBILE
@media (max-width: $grid-separate-width-md) {
  .diary {
    .diary-list-container {
      width: 100%;
    }
    .diary-container {
      display: none;
    }
  }
}


@import "dark";
